<template>
  <div>
    <nav-top class="navtop"></nav-top>
    <!-- 内容 -->
    <!-- 顶部信息 -->
    <div class="infoB">
      <div class="info">
        <div class="imgs">
          <img src="../assets/images/ergeng.png" alt="" />
          <em>Lv.5</em>
        </div>
        <div class="author">{{ $route.query.author }}</div>
      </div>
      <div class="text">
        <li>
          <p>作品数</p>
          <p>2</p>
        </li>
        <li>
          <p>创作字数</p>
          <p>66.66万</p>
        </li>
        <li>
          <p>创作天数</p>
          <p>365</p>
        </li>
      </div>
    </div>
    <!-- 本书简介 -->
    <div class="introduction">
      <book-list :data='data'> </book-list>
    </div>
    <!-- 本书粉丝 -->
    <div class="works">
      <h3>本书粉丝</h3>
      <div>8.6万</div>
      <span class="iconfont icon-arrow-right-"></span>
    </div>
    <!-- 加载层 -->
    <van-overlay :show="overlay" z-index="99">
      <div class="wrapper">
        <van-loading type="spinner" color="#1989fa" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
// import { getAuthor } from "../api/author/all.js";
export default {
  data() {
    return {
      show: false,
      data: [
        {
          _id: "5d020a2e035a4416960fd2f1",
          author: "绝人",
          cover:
            "/agent/http%3A%2F%2Fimg.1391.com%2Fapi%2Fv1%2Fbookcenter%2Fcover%2F1%2F3387088%2F3387088_368c1a79dccf420d8a343009fd954d29.jpg%2F",
          majorCate: "都市",
          shortIntro:
            "“我叫韩三千”\r\n三年前，我如同一条狗一样，被赶出家族的大门\r\n三年后，家族掌门却来求我，让我回家主持大局……\r\n\r\n入赘三年，我可以忍受岳母的欺辱，朋友的嘲笑，但我忍不了你受一丁点委屈\r\n隐忍三年，我可以承担废物的骂名，家族的唾弃，但我受不了你哪怕一滴眼泪\r\n所有人都以为可以骑在我头上，而我，只等你牵起我的手，便给你整个世界。",
          title: "超级女婿",
        },
      ],
      rating: {},
      overlay: false,
    };
  },
  methods: {
    toRouter(path, params) {
      this.$router.push({
        path: `/${path}`,
        query: { ...params },
      });
    },
    back() {
      this.$router.go(-1);
    },
    getData() {
      // console.log(this.$route.query.author);
      // getAuthor({ author: this.$route.query.author }).then((data) => {
      //   console.log(data);
      // });
    },
  },
  created() {
    this.getData();
  },
  computed: {},
  filters: {
    imgUrl(url) {
      if (url) {
        return "http://statics.zhuishushenqi.com" + url;
      } else {
        return "";
      }
    },
    time(date) {
      let time =
        new Date().getTime() - new Date((date || "").split(".")[0]).getTime();
      let hour = parseInt(time / 1000 / 60 / 60);
      let day = hour >= 24 ? parseInt(hour / 24) : 0;
      let year = day >= 365 ? parseInt(day / 365) : 0;
      let min = parseInt(time / 1000 / 60);
      let str =
        year != 0
          ? year + "年前"
          : day != 0
          ? day + "天前"
          : hour != 0
          ? hour + "小时前"
          : min != 0
          ? min + "分钟前"
          : "刚刚";
      return str;
    },
    count(num) {
      let w = (num / 10000).toFixed(2);
      return w;
    },
  },
};
</script>
<style lang="less" scoped>
.navtop {
  width: 100%;
  position: absolute;
}
// 内容
.infoB {
  padding: 1.5rem 0.46875rem 10px;
  border-bottom: 2px solid #9999991c;
  background-color: white;
  background: linear-gradient(
      to right,
      #fff,
      rgba(219, 219, 219, 43%),
      #fff,
      rgba(189, 178, 178, 13%) 10rem
    ),
    linear-gradient(
        to top right,
        rgba(219, 219, 219, 43%),
        #fff,
        rgba(189, 178, 178, 13%) 10rem,
        #fff
      )
      no-repeat center bottom;
  font-size: 0.328125rem;
  .info {
    .imgs {
      width: 1.7rem;
      position: relative;
      margin: 0 auto;
      img {
        width: 100%;
        height: auto;
        border-radius: 50%;
      }
      em {
        font-size: 0.3125rem;
        background-color: #f0643a;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        color: white;
        width: 1rem;
        text-align: center;
        height: 0.46875rem;
        line-height: 0.46875rem;
        border-radius: 0.46875rem;
        box-shadow: inset 0 0 1px 1px white;
      }
    }
    .author {
      font-size: 0.390625rem;
      font-weight: bold;
      text-align: center;
      margin: 0.390625rem 0;
    }
  }
  .text {
    display: flex;
    li {
      flex: 1;
      p {
        text-align: center;
        &:nth-child(1) {
          margin-bottom: 5px;
          color: rgba(0, 0, 0, 0.5);
        }
        &:nth-child(2) {
          font-size: 0.46rem;
        }
      }
    }
  }
}

.works {
  padding: 0 0.46875rem;
  height: 1.125rem;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  h3 {
    width: 3rem;
    font-size: 0.46875rem;
  }
  div {
    flex: 1;
    font-size: 0.34375rem;
    white-space: nowrap;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #aaa;
    em {
      margin: 0 0.078125rem;
      font-weight: bolder;
    }
  }
  span {
    width: 0.4rem;
    color: #aaa;
  }
}
</style>